import React, { useEffect } from "react";
import { Card, Form, Select } from "antd";
import {
    getCategoryList1Async,
    getCategoryList2Async,
    getCategoryList3Async,
    upCategory1Id,
    upCategory2Id,
    upCategory3Id,
    useSelectorCategory,
} from "@/store/slice/category";
import { useAppDispatch } from "@/hooks";

type IProps = {
    modalVisible: boolean;
};

function CategorySelector(props: IProps) {
    const { categoryList1, categoryList2, categoryList3, category1Id, category2Id, category3Id } =
        useSelectorCategory();
    const dispatch = useAppDispatch();
    const [form] = Form.useForm();

    useEffect(() => {
        dispatch(getCategoryList1Async());
    }, []);

    return (
        <div>
            <Card>
                <Form form={form} layout={"inline"} disabled={props.modalVisible}>
                    <Form.Item label={"一级分类"}>
                        <Select
                            placeholder={"请选择一级分类"}
                            value={category1Id}
                            onSelect={(value: any) => {
                                dispatch(getCategoryList2Async(value));
                                dispatch(upCategory1Id(value));
                            }}
                            style={{ width: 200, marginRight: 80 }}
                            options={categoryList1.map((item: any) => ({ label: item.name, value: item.id }))}
                        />
                    </Form.Item>
                    <Form.Item label={"二级分类"}>
                        <Select
                            style={{ width: 200, marginRight: 80 }}
                            placeholder={"请选择二级分类"}
                            value={category2Id}
                            onSelect={(value: any) => {
                                dispatch(getCategoryList3Async(value));
                                dispatch(upCategory2Id(value));
                            }}
                            options={categoryList2.map((item: any) => ({ label: item.name, value: item.id }))}
                        />
                    </Form.Item>
                    <Form.Item label={"三级分类"}>
                        <Select
                            style={{ width: 200, marginRight: 80 }}
                            value={category3Id}
                            placeholder={"请选择三级分类"}
                            onSelect={(value: any) => {
                                dispatch(upCategory3Id(value));
                            }}
                            options={categoryList3.map((item: any) => ({ label: item.name, value: item.id }))}
                        />
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
}

export default CategorySelector;
